<template>
  <div class="share-order-container">
    <div class="title-con clearfix">
      <a @click="openLink(orderInfo.link)">
        <img :src="orderInfo.img_path || defaultImg" class="fl" alt />
      </a>
      <div class="title-desc fr">
        <p>
          <span>{{orderInfo.username}}</span>豪掷
          <b class="fontGilroy">
            <i style="margin-right:1px;">{{mSymbol.name}}</i>{{orderInfo.price}}
          </b>把他收入囊中
        </p>
      </div>
    </div>
    <div class="goods-box">
      <img :src="orderInfo.img_path || defaultImg" alt />
      <h3 class="title" v-if="orderInfo.sku_name">{{orderInfo.item_title}}({{orderInfo.sku_name}})</h3>
      <h3 class="title" v-else>{{orderInfo.item_title}}</h3>
      <div class="detail-box clearfix">
        <!-- <div class="fl price fontGilroy">
          ￥<em>{{orderInfo.payment}}</em>
        </div> -->
        <div class="price" v-html="scaleGoodsPriceFn(orderInfo.price)"></div>
        <div class="fr detail-btn" @click="clickOrderDetail">
          <img class="fl" src="https://img.wifenxiao.com/h5-wfx/images/user/shareOrder/icon_detail.png" alt />
          <span class="fl">订单详情</span>
        </div>
      </div>
      <div class="button-box">
        <div class="box clearfix">
          <a @click="openLink(orderInfo.link)" class="fl btn">
            <img class src="https://img.wifenxiao.com/h5-wfx/images/user/shareOrder/icon_buy.png" alt />
            <span class>我也要</span>
          </a>
          <a @click="openLink(orderInfo.index_link)" class="fl btn">
            <img class src="https://img.wifenxiao.com/h5-wfx/images/user/shareOrder/icon_shop.png" alt />
            <span class>进店逛逛</span>
          </a>
        </div>
      </div>
    </div>
    <van-popup
      class="box-content"
      v-model="showDetail"
      round
      position="bottom"
      :style="{ height: 'auto',maxHeight:'70%' }"
    >
      <h3>订单详情</h3>
      <van-card
        :title="orderInfo.item_title"
        :desc="orderInfo.sku_name"
        :thumb="orderInfo.img_path?orderInfo.img_path:defaultImg"
      >
        <div slot="tags" class="goods-bottom">
          <div class="price-num clearfix">
            <!-- <span class="price fontGilroy fl">
              <i class="mark">￥</i><em>{{orderInfo.current_price}}</em>
            </span> -->
            <span class="price fl" v-html="scaleGoodsPriceFn(orderInfo.price)"></span>
            <span class="fr">x{{orderInfo.num}}</span>
          </div>
        </div>
      </van-card>
      <ul>
        <li class="box-li clearfix">
          <span class="fl">运费：<i>{{mSymbol.name}}{{orderInfo.post_fee}}</i></span>
          <span class="fr">总价：<i>{{mSymbol.name}}{{orderInfo.payment}}</i></span>
        </li>
			  <li class="box-li clearfix">
          <span class="fl">订单编号：<i>{{orderInfo.order_no}}</i></span>
        </li>
			  <li class="box-li clearfix">
          <span class="fl">订单时间：<i>{{orderInfo.create_time}}</i></span>
        </li>
			  <li class="box-li clearfix" v-if="order_detail_info==1">
          <span>收货信息：<i>{{orderInfo.receiver_name}} {{orderInfo.receiver_mobile}}</i></span>
          <br>
          <span><i>{{orderInfo.receiver_address}}</i></span>
        </li>
      </ul>
    </van-popup>
    <!-- 授权弹出框 -->
    <small-login ref="smalllogin"></small-login>
  </div>
</template>

<script>
import StoreSave from '@/utils/store'
import { getCommentEnjoy, shareCommentEnjoySuccess } from '@/api/user/member/memberApi'
import { scaleGoodsPrice, formatDate } from '@/utils/index.js'
import small from '@/smallapp/small'
import SmallLogin from '@/components/SmallLogin/smallLogin.vue'
import { openPage, mpShare } from '@/utils/utils.js'
import Vue from 'vue'
import { Card } from 'vant'
Vue.use(Card)
import { Popup } from 'vant'
Vue.use(Popup)
import { mapGetters } from 'vuex'

export default Vue.extend({
  name: 'index',
  components: {
    SmallLogin
  },
  data() {
    return {
      query: '',
      defaultImg: 'https://img.wifenxiao.com/h5-wfx/images/default_goods_img.jpg',
      showDetail: false,
      orderInfo: {},
      order_detail_info: ''
    }
  },
  methods: {
    openLink(link) {
      openPage(link)
    },
    scaleGoodsPriceFn(price) {
      return scaleGoodsPrice(price)
    },
    // 分享成功的回调
    shareSuccess() {
      // 用户确认后执行的回调函数
      if (this.query.type != 'price') {
        const params = {
          id: this.query.id
        }
        shareCommentEnjoySuccess(params).then(res => {
          if (res.status == 1) {
            if (res.data) {
              this.$Error(res.data.msg)
              // setTimeout(function() {
              //   var url = res.data.jump_url
              //   window.location.href = url
              // }, 1000)
            }
          } else {
            this.$Error(res.msg)
          }
        })
      }
    },
    init(params) {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      getCommentEnjoy(params).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          const resData = res.data
          this.orderInfo = resData.res
          this.order_detail_info = resData.order_detail_info
          this.orderInfo.create_time = formatDate(resData.res.create_time)
          // sid=3869&pid=11998&itemId=145517&type=price
          const params = res.data.jsapi_url.split('?')[1]
          const arr = params.split('&')
          const option = {
            title: resData.jsapi_title,
            imgUrl: resData.jsapi_img,
            shareParam: `${arr[0]}&${arr[1]}&${arr[2]}&types=price`
          }
          mpShare (true, false, '/user/pages/shareOrder/index', option,null,this.shareSuccess)
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 点击点击查看订单详情
    clickOrderDetail() {
      this.showDetail = true
    }
  },
  created() {
    if (this.$route.query.itemId) {
      StoreSave.saveLocal('shareOrderItemId', this.$route.query.itemId)
    } else {
      StoreSave.saveLocal('shareOrderItemId', '')
    }
    if (this.$route.query.type || this.$route.query.types) {
      StoreSave.saveLocal('shareOrderType', this.$route.query.type || this.$route.query.types)
    } else {
      StoreSave.saveLocal('shareOrderType', '')
    }
    const params = {
      id: StoreSave.fetchLocal('shareOrderItemId'),
      type: StoreSave.fetchLocal('shareOrderType')
    }
    this.query = params
    this.init(params)
  },
  mounted() {
      window.addEventListener('wxload', query => {
        // console.log(query, this.$route.query, '分享参数12')
        small.HandleShareParams()
      })

      window.addEventListener('wxshow', () => {
        if (!small.checkLogin()) {
          this.$refs.smalllogin.openSmallLoginPop()
        }
      })

			window.$$subscribe('loginReload', reload => {
				if (reload) {
					this.init(this.query)
				}
			})
  },
  beforeDestroy() {
    window.$$unsubscribe('loginReload')
  },
  computed: {
    // 获取自定义符号
    ...mapGetters(['mSymbol'])
  }
})
</script>

<style lang="scss">
@import "../../../../styles/mixin";
.share-order-container {
  img {
    display: block;
  }
  .title-con {
    margin: 20px;
    padding: 20px;
    border-radius: 10px;
    overflow: hidden;
    background-color: #fff;
    img {
      width: 136px;
      height: 136px;
      border-radius: 10px;
    }
    .title-desc {
      position: relative;
      width: calc(100% - 156px);
      height: 124px;
      margin-left: 20px;
      p {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        line-height: 36px;
        font-size: 24px;
      }
      b {
        font-size: 26px;
        color: #ff6d00;
        i {
          font-size: 22px;
        }
      }
    }
  }
  .goods-box {
    background-color: #fff;
    .title {
      padding: 26px 20px 10px;
      font-size: 30px;
      line-height: 50px;
    }
    .detail-box {
      background-color: #fff;
      padding: 0 0 26px 20px;
    }
    .price {
      font-size: 22px;
      color: #ff6d00;
      line-height: 56px;
      em {
        font-size: 32px;
      }
    }
    .detail-btn {
      padding: 14px;
      font-size: 24px;
      line-height: 24px;
      color: #fff;
      border-radius: 28px 0 0 28px;
      @include gradient(right, #ffa70e, #ff8303);
      img {
        width: 24px;
        height: 26px;
        margin: 0 6px;
      }
    }
    .button-box {
      height: 100px;
      padding: 0 20px;
      background-color: #fff;
      .box {
        border-top: 2px solid #f5f5f5;
      }
      .btn {
        display: block;
        height: 100%;
        width: 50%;
        text-align: center;
        img {
          display: inline-block;
          width: 34px;
          height: 30px;
          margin-right: 2px;
          vertical-align: -4px;
        }
        span {
          line-height: 100px;
        }
      }
    }
  }
  .box-content{
    padding:0 20px;
    h3{
      font-size: 32px;
      line-height: 110px;
      text-align: center;
    }
    ul{
      margin: 0 20px;
      padding-bottom:20px;
    }
    .van-card{
      margin:0;
      padding: 34px;
      background: #fafafa;
      .van-card__thumb{
        width:148px;
        height:148px;
      }
      .van-card__content{
        position:relative;
      }
      .goods-bottom{
        position:absolute;
        bottom:0;
        width:100%;
      }
      .price{
        max-width: 50%;
        line-height: 30px;
        color:#ff6d00;
        .mark{
          font-size:22px;
        }
        em{
          font-size: 28px;
        }
      }
    }
    .box-li{
      padding: 16px 0;
      border-bottom: 2px solid #f5f5f5;
      span{
        font-size: 24px;
        line-height: 40px;
        i{
          color:#666;
        }
      }
      &:last-child{
        border:0;
      }
    }
    .price-num {
      .fr {
        font-size: 24px;
      }
    }
  }
}
</style>
